<template>
  <div class="pull-height" :style="{backgroundImage:'url('+login_center_bg+')'}" style="background-size:100% 100%">
    <el-card class="register-form">
      <!-- 根标签 -->
      <el-form autoComplete="on"
               id="registerForm"
               :model="registerForm"
               :rules="registerRules"
               ref="registerForm"
               label-position="left">

        <h2 class="login-title color-main">注册</h2>
        <el-form-item :label="'用户名 ' + (registerForm.username)" prop="username">
          <el-input v-model="registerForm.username" disabled placeholder="注册成功后自动生成"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="registerForm.nickName"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="registerForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="registerForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="registerForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click.native.prevent="submitForm" >注册</el-button>
          <!--          <el-button type="primary" @click.native.prevent="login()">登录</el-button>-->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {isValidUsername} from '@/utils/validate';
import {register} from "@/api/login";
import {getCookie, setCookie} from '@/utils/support';
import login_center_bg from '@/assets/images/movie.jpeg'

export default {
  name: 'register',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isValidUsername(value)) {
        callback(new Error('请输入正确的用户名'));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === undefined || value === null) {
        callback(new Error("密码不能为空"));
      } else if (value.length < 6) {
        callback(new Error('密码不能小于6位'));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      registerForm: {
        username: "",
        nickName: "",
        email: "",
        phone: "",
        password: "",
        checkPass: "",
      },
      registerRules: {
        nickName: [{validator: validateUsername, required: true, message: "请输入昵称", trigger: "blur"}],//校验规则：必填、信息提示、失去焦点
        phone: [{required: true, message: "请输入电话", trigger: "blur"}],
        password: [{validator: validatePass, required: true, trigger: "blur"}],
        checkPass: [{validator: validatePass2, required: true, trigger: "blur"}],
      },
      login_center_bg
    };
  },
  methods: {
    submitForm() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          register(this.registerForm)
            .then((res) => {
              this.registerForm.username = res.data
              alert("注册成功!用户名为：" + res.data);
              this.$store.dispatch('Login', this.registerForm).then(() => {
                this.loading = false;
                setCookie("username", this.registerForm.username, 15);
                setCookie("password", this.registerForm.password, 15);
                this.$router.push({path: '/fms'})
                // location.reload()
              }).catch(() => {
                this.loading = false
              })
            })
            .catch((err) => {
              console.log("注册失败！");
            });
        } else {
          console.log("校验失败!!");
          return false;
        }
      });
    }
  },
}
</script>
<style>
.pull-height {
  width: 100vw;
  height: 100vh;
}

#register-container .el-form-item label {
  /*color: white;*/
  width: 80px;
}
</style>
<style scoped>

.register-form {
  /*position: absolute;*/
  left: 0;
  right: 0;
  width: 360px;
  margin: auto;
  border: none;
  /*background: rgba(0, 0, 0, .65);*/
}

.login-title {
  text-align: center;
}

</style>

